<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button
          v-hasPermissions="['basic:system:menus:add']"
          type="primary"
          @click="add"
          :icon="Plus"
        >
          新增
        </el-button>
        <el-button
          v-hasPermissions="['basic:system:menus:add']"
          type="primary"
          @click="expand"
          :icon="DCaret"
        >
          全部展开/折叠
        </el-button>
      </template>
    </pub-search>
    <el-table
      :key="keyValue"
      class="custom-table"
      v-loading="tableLoading"
      :data="tableData"
      :default-expand-all="expandAll"
      style="width: 100%"
      height="100%"
      row-key="id"
      border
      :header-cell-style="{
        background: '#F4F9FF',
        color: '#087CD6',
        fontSize: '14px'
      }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        align="left"
        prop="name"
        label="菜单名称"
        show-overflow-tooltip
        width="280"
      />
      <el-table-column
        align="left"
        prop="icon"
        label="菜单图标"
        show-overflow-tooltip
        width="300"
      >
        <template v-slot="scope">
          <svg style="background: #087cd6;" class="icon" aria-hidden="true" v-if="scope.row.icon">
            <use :xlink:href="'#jq-' + scope.row.icon"></use>
          </svg>
          <span v-else>--</span>
          {{ scope.row.icon }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="type"
        label="菜单类型"
        width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <div style="font-size: 12px; display: inline-block">
            <span
              :style="{
                color:
                  scope.row.type == 1
                    ? ''
                    : scope.row.type == 2
                    ? '#13ce66'
                    : scope.row.type == 3
                    ? '#087cd6'
                    : ''
              }"
            >
              {{ formatDictCode('SYS_CDLX', scope.row.type) }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        prop="code"
        label="路由标识"
        show-overflow-tooltip
        width="300"
      />
      <el-table-column
        align="left"
        prop="component"
        label="代码路径"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.component">{{ scope.row.component }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column
        width="100px"
        align="center"
        prop="status"
        label="菜单状态"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <el-switch
            :model-value="scope.row && scope.row.status > 0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeResourceStatus($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="keepAlive"
        label="页面缓存"
        width="90"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          {{ formatDictCode('SF', scope.row.keepAlive) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="250px"
        align="center"
        header-align="center"
        fixed="right"
      >
        <template v-slot="scope">
          <el-button
            v-hasPermissions="['basic:system:menus:addChildren']"
            v-if="
              scope.row.type == 1 || scope.row.type == 2 || scope.row.type == 0
            "
            type="primary"
            plain
            class="btn-row-add"
            @click="addChildren(scope.row)"
          >
            添加子菜单
          </el-button>

          <el-button
            v-hasPermissions="['basic:system:menus:edit']"
            type="success"
            plain
            class="btn-row-edit"
            @click="edit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-hasPermissions="['basic:system:menus:delete']"
            v-if="scope.row.type != 2"
            class="btn-row-del"
            type="danger"
            plain
            @click="del(scope.row)"
          >
            删除
          </el-button>
          <el-dropdown
            style="margin-left: 20px"
            size="medium"
            v-if="scope.row.type == 2"
          >
            <el-button type="primary">
              更多
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="del(scope.row)">
                  <span v-hasPermissions="['basic:system:menus:delete']">
                    删除
                  </span>
                </el-dropdown-item>

                <el-dropdown-item @click.native="btnAuth(scope.row)">
                  <span v-hasPermissions="['basic:system:menus:auth']">
                    页面鉴权
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pub-dialog
      v-if="editShow"
      title="编辑菜单"
      @close="close"
      :hasExtraBtn="true"
      v-model:visible="editShow"
      width="1000px"
    >
      <editDialog
        :default-form="state.defaultForm"
        :edit-type="editType"
        @success="handleSuccess"
        @cancel="handleCancel"
      />
    </pub-dialog>
    <pub-dialog
      v-if="detailDialog"
      title="添加菜单"
      @close="close"
      :hasExtraBtn="true"
      v-model:visible="detailDialog"
      width="1000px"
    >
      <addDialog
        @cancel="handleCancel"
        @success="handleSuccess"
        :lastMenusPath="lastMenusPath"
        :isAddChild="isAddChild"
        :currentIndex="currentIndex"
        :currentType="currentType"
        :currentPid="currentPid"
        :currentPlatform="currentPlatform"
      />
    </pub-dialog>
    <pub-dialog
      v-if="InterfaceAuthVisible"
      :hasExtraBtn="true"
      title="鉴权"
      v-model:visible="InterfaceAuthVisible"
      width="1100px"
    >
      <InterfaceAuth
        ref="InterfaceAuthRef"
        :authId="authId"
        @close="InterfaceAuthVisible = false"
      />
    </pub-dialog>
  </list-page>
</template>

<script setup>
import { formatDictCode } from '@/utils/index.js'
import { Plus, DCaret } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import editDialog from './components/edit.vue'
import addDialog from './components/add.vue'
import InterfaceAuth from './components/InterfaceAuth.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useTableNoPage } from '@/hooks/useTableNoPage'
import {
  get_menus_list,
  del_menus,
  change_resource_status
} from '@/api/system.js'
import { useUserStore } from '@/pinia/modules/user'
const editShow = ref(false)
const currentPid = ref('')
const currentPlatform = ref('')
const detailDialog = ref(false)
const currentIndex = ref(0)
const currentType = ref(null)
const authId = ref('')
const lastMenusPath = ref('')
const InterfaceAuthVisible = ref(false)
const editType = ref('add')
const isAddChild = ref(false)
const keyValue = ref()
const searchColumns = ref([
  {
    label: '平台类型',
    el: 'DictSelect',
    bind: 'platform',
    code: 'SYS_PTLX',
    defaultValue: '1',
    labelWidth: 80
  },
  {
    label: '菜单名称',
    el: 'Input',
    bind: 'name',
    defaultValue: '',
    labelWidth: 80
  },

  {
    label: '路由标识',
    el: 'Input',
    bind: 'code',
    defaultValue: '',
    labelWidth: 80
  }
])
const state = reactive({
  defaultForm: {
    pid: '',
    id: ''
  }
})
const expandAll = ref(false)

let { tableData, search, getList, searchForm, tableLoading } =
  useTableNoPage(get_menus_list)

const router = useRouter()

const close = () => {
  editShow.value = false
  detailDialog.value = false
}

const btnAuth = row => {
  authId.value = row.id
  InterfaceAuthVisible.value = true
}

const del = item => {
  ElMessageBox.confirm('确认删除选择的记录？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      tableLoading = true
      del_menus(item.id).then(res => {
        if (res.succeed) {
          ElMessage.success(res.msg)
          getList()
        }
        tableLoading = false
      })
    })
    .catch(() => {
      tableLoading = false
    })
}

const changeResourceStatus = (val, item) => {
  let params = {
    id: item.id,
    status: val ? '1' : '0'
  }
  tableLoading = true
  change_resource_status(params).then(res => {
    getList()
  })
  tableLoading = false
}

const expand = () => {
  expandAll.value = !expandAll.value
  keyValue.value = new Date().getTime()
  getList()
}

const add = () => {
  // 新增菜单
  isAddChild.value = false
  detailDialog.value = true
}

const addChildren = item => {
  // 添加子菜单
  isAddChild.value = true
  currentPid.value = item.id
  currentPlatform.value = item.platform
  // lastMenusPath.value = item.path
  if (item.type == 2) {
    // 当前点击菜单为页面
    currentType.value = 3
  } else {
    currentType.value = null
  }
  currentIndex.value = item.children.length + 1
  detailDialog.value = true
}

const edit = item => {
  editType.value = 'edit'
  state.defaultForm.id = item.id
  editShow.value = true
}

const handleCancel = () => {
  editShow.value = false
  detailDialog.value = false
}

const handleSuccess = () => {
  getList()
  editShow.value = false
  detailDialog.value = false
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.custom-table {
  font-family: 'Microsoft YaHei';
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 0px !important;
  }
  :deep(.el-button) {
    border: 0 solid transparent !important;
    background-color: transparent !important;
    font-size: 14px !important;
    padding: 6px 0px !important;
    font-family: 'Microsoft YaHei';
  }
  :deep(.el-button + .el-button) {
    margin-left: 19px !important;
  }
  :deep(.el-button--success) {
    // color: var(--el-color-success) !important;
    // &:hover {
    //   color: var(--el-color-success) !important;
    // }

    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
  :deep(.el-button--primary) {
    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
  :deep(.el-button--danger) {
    // color: var(--el-color-danger) !important;
    // &:hover {
    //   color: var(--el-color-danger) !important;
    // }
    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
}
</style>
